<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">

        <fieldset class="table-search-fieldset">
            <legend>卡密列表</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">内容</label>
                            <div class="layui-input-inline">
                                <input type="text" name="content" autocomplete="off" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">类型</label>
                            <div class="layui-input-inline">
                                <select name="type">
                                    <option value="1" selected="">卡密</option>
                                    <option value="2">使用者</option>
                                </select>
                            </div>
                        </div>

                        <div class="layui-inline">
                            <button type="button" class="layui-btn layui-btn-primary" lay-submit
                                lay-filter="data-search-btn"> 添加</button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>
        <style>
            .layui-table-tool {
                background: #fff;
            }
        </style>
        <script type="text/html" id="toolbarDemo">

            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm data-add-btn" lay-event="add"> 添加卡密 </button>
                <!-- <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除用户 </button> -->
            </div>
        </script>

        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

        <script type="text/html" id="currentTableBar">
        <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
        </script>

    </div>
</div>

<script type="text/html" id="typeTemp">
    {{#  if(d.type==1){ }}
    <button class="layui-btn layui-btn-xs" style="background-color: #7574c5;">余额</button>
    {{#  } else { }}
    <button class="layui-btn layui-btn-normal layui-btn-xs">时间</button>
    {{#  } }}
</script>

<script type="text/html" id="nameTemp">
    {{#  if(d.name==null){ }}
    {{#  } else { }}
    <button class="layui-btn layui-btn-danger layui-btn-xs">{d.name}</button>
    {{#  } }}
</script>

<script type="text/html" id="stateTemp">
    {{#  if(d.state==''){ }}
    <span class="layui-badge layui-bg-green">未使用</span>
    {{#  } else { }}
     <span class="layui-badge">已使用</span>
    {{#  } }}
</script>

<script>
    layui.use(['form', 'table', 'miniPage', 'lycms'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            miniPage = layui.miniPage,
            lycms = layui.lycms;
        form.render();
        table.render({
            elem: '#currentTableId',
            url: '/v1/admin/data/kamilist',
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [[
                { field: "id", title: '序号', width: 80 },
                { field: 'content', title: '卡密内容', align: "center", minWidth: 300 },
                {
                    field: 'points', title: '卡密面值', sort: true, width: 100, align: "center", templet: function (data) {
                        if (data.type == "1") {
                            return data.points + "元";
                        } else {
                            return data.points = data.kami_time + "天";
                        }
                    }
                },
                {
                    field: 'type', templet: '#typeTemp', title: '类型', minWidth: 150, align: "center", width: 80
                },
                {
                    field: 'state', templet: '#stateTemp', title: '状态', minWidth: 150, align: "center", width: 80
                },
                {
                    field: 'name', templet: '#nameTemp', title: '使用者', width: 150, minWidth: 50, align: "center"
                },
                {
                    field: 'uptime', title: '使用时间', width: 150, align: "center"
                },
                { field: 'time', width: 220, title: '添加时间', sort: true, width: 150, align: "center" },
                { title: '操作', width: 90, minWidth: 50, templet: '#currentTableBar', fixed: "right", align: "center" }
            ]],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15,
            page: true
        });

        // 监听添加操作
        form.on('submit(data-search-btn)', function (data) {
            var result = JSON.stringify(data.field);
            //执行搜索重载
            table.reload('currentTableId', {
                where: {
                    searchParams: result
                }
            }, 'data');
            layer.msg("搜索成功")
            return false;
        });


        //监听操作
        table.on('tool(currentTableFilter)', function (obj) {
            var data = obj.data;
            console.log(obj);
            if (obj.event === 'delete') {
                //删除
                layer.confirm('真的删除吗?', { title: "提示" }, function (index) {
                    obj.del();
                    //关闭提示框
                    layer.close(index);
                    console.log(index, data.inc_id);
                    //删除
                    $.post("/ask/action/system/kamilist/del", { id: data.id }, function (data, status) {
                        if (data.code == "200") {
                            layer.msg(data.msg, { time: 1500 }, function () {
                                lycms.pageRefresh();
                            });
                        } else {
                            layer.msg(data.msg, { time: 1500 });
                        }
                    });
                });
            }
        });

    });
</script>